import 'package:number_spark_flutter/style/ns_style.dart';
import 'package:number_spark_flutter/utils/ns_user_utils.dart';
import 'package:number_spark_flutter/widgets/brick/ns_brick.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';

import '../../routes/ns_app_pages.dart';
import 'ns_mine_logic.dart';

class NSMinePage extends StatelessWidget {
  NSMinePage({Key? key}) : super(key: key);

  final logic = Get.put(NSMineLogic());

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        backgroundColor: Colors.transparent,
        body: Stack(
          alignment: Alignment.topCenter,
          children: [
            NSColumn(
              width: double.infinity,
              children: [
                _buildUserInfoView(),
                _buildCoinView(),
                _buildMineItem(
                  title: 'Edit Information',
                  onTap: () {
                    logic.doClickUserInfo();
                  },
                ),
                _buildMineItem(
                  title: 'Setting',
                  onTap: () {
                    Get.toNamed(NSRoutes.setting);
                  },
                ),
                _buildMineItem(
                    title: 'About',
                    onTap: () {
                      Get.toNamed(NSRoutes.about);
                    })
              ],
            ),
            NSImage(
              margin: EdgeInsets.only(top: 220.w),
              assetImage: 'icon_record_start.png',
              width: 32.w,
              onTap: () {
                logic.doClickRecord();
              },
            ),
            _buildRecordInfoView()
          ],
        ));
  }


  _buildCoinView() {
    return NSStack(
      margin: EdgeInsets.only(top: 10.h, left: 28.w, right: 28.w, bottom: 10.h),
      children: [
        NSImage(
          assetImage: 'img_bg_mine_coin.png',
          width: 320.w,
        ),
        NSColumn(
          margin: EdgeInsets.only(left: 191.w, top: 15.h, bottom: 15.h),
          children: [
            NSStack(
              children: [
                NSText(
                  text: 'My Coins',
                  fontSize: 20.sp,
                  fontFamily: 'Modak-Regular',
                  foreground: Paint()
                    ..style = PaintingStyle.stroke
                    ..strokeWidth = 1.5
                    ..color = kAppColor('#FF6151A8'),
                ),
                NSText(
                  text: 'My Coins',
                  textColor: Colors.white,
                  fontSize: 20.sp,
                  fontFamily: 'Modak-Regular',
                ),
              ],
            ),
            GetBuilder<NSMineLogic>(builder: (logic) {
              return NSStack(
                children: [
                  NSText(
                    text: logic.userInfoModel.availableCoins.toString(),
                    fontSize: 35.sp,
                    fontFamily: 'Modak-Regular',
                    foreground: Paint()
                      ..style = PaintingStyle.stroke
                      ..strokeWidth = 1.5
                      ..color = kAppColor('#FF6151A8'),
                  ),
                  NSText(
                    text: logic.userInfoModel.availableCoins.toString(),
                    textColor: Colors.white,
                    fontSize: 35.sp,
                    fontFamily: 'Modak-Regular',
                  ),
                ],
              );
            }),
          ],
        )
      ],
      onTap: () {
        Get.toNamed(NSRoutes.coinShop);
      },
    );
  }

  _buildUserInfoView() {
    return GetBuilder<NSMineLogic>(builder: (logic) {
      return NSColumn(
        margin: EdgeInsets.only(top: 100.w),
        children: [
          NSImage(
            httpImage: NSUserUtils.getIsChangedAvatar() ? logic.userInfoModel.avatarThumbUrl : '',
            assetPlaceHolder: 'icon_default_avatar.png',
            width: 136.w,
            height: 136.w,
            radius: 100.w,
            color: Colors.grey.withOpacity(0.8),
            strokeColor: Colors.white,
            strokeWidth: 2.w,
          ),
          NSText(
            margin: EdgeInsets.only(top: 10.h),
            text: logic.userInfoModel.nickname,
            textColor: Colors.white,
            fontSize: 28.sp,
            marginDrawable: 11.w,
            fontFamily: 'Modak-Regular',
          ),
          NSText(
            text: 'ID: ${logic.userInfoModel.userId}',
            textColor: Colors.white,
            fontSize: 12.sp,
            fontFamily: 'Modak-Regular',
            marginDrawable: 4.w,
            endDrawable: NSImage(
              assetImage: 'icon_mine_copy.png',
              width: 20.w,
              onTap: () {
                logic.doClickCopy();
              },
            ),
          )
        ],
      );
    });
  }

  _buildMineItem({required String title, required onTap}) {
    return NSStack(
      margin: EdgeInsets.only(bottom: 23.h),
      alignment: Alignment.center,
      onTap: onTap,
      children: [
        NSImage(
          assetImage: 'img_bg_mine_btn.png',
          width: 316.w,
        ),
        NSText(
          text: title,
          fontSize: 24.sp,
          fontFamily: 'Modak-Regular',
          foreground: Paint()
            ..style = PaintingStyle.stroke
            ..strokeWidth = 1.5
            ..color = kAppColor('#FF4BA611'),
        ),
        NSText(
          text: title,
          textColor: Colors.white,
          fontSize: 24.sp,
          fontFamily: 'Modak-Regular',
        ),
      ],
    );
  }

  _buildRecordInfoView() {
    return GetBuilder<NSMineLogic>(
      builder: (logic) {
        if (NSUserUtils.getUserRecordModel() != null) {
          return Container(
            margin: EdgeInsets.only(top: 60.w, left: 70.w),
            child: Stack(
              // color: Colors.yellow,
              // margin: EdgeInsets.only(top: 60.w, left: 70.w),
              alignment: Alignment.topRight,
              children: [
                NSImage(
                  assetImage: 'img_bg_mine_vioice_play.png',
                  width: 117.w,
                ),
                NSRow(
                  width: 117.w,
                  margin: EdgeInsets.only(top: 10.w, left: 40.w),
                  padding: EdgeInsets.only(left: 10.w, right: 10.w),
                  children: [
                    NSImage(
                      assetImage: 'icon_mine_play_voice.png',
                      width: 20.w,
                      imageColor: Colors.white,
                    ),
                    NSText(
                      margin: EdgeInsets.only(left: 5.w),
                      text: '${NSUserUtils.getUserRecordModel()!.time}S',
                      textColor: Colors.white,
                      fontSize: 20.sp,
                      fontFamily: 'Modak-Regular',
                    ),
                    NSImage(
                      margin: EdgeInsets.only(left: 20.w),
                      assetImage: 'icon_mine_voice_delete.png',
                      width: 24.w,
                      onTap: () {
                        NSUserUtils.clearUserRecordModel();
                        logic.update([idRecordModel]);
                      },
                    )
                  ],
                )
              ],
            ),
          );
        }
        return SizedBox();
      },
      id: idRecordModel,
    );
  }
}
